feat(TMC-15843): disabled item in datalist#1990
Conversation
1 similar comment
There was a problem hiding this comment.
You should pass props.itemProps to react-virtualized, as a function that returns extra props to place on items (<li>) in order to pass aria-disabled on disables items
Look at https://github.com/moroshko/react-autowhatever/blob/master/src/ItemsList.js#L50
|
|
||
| return ( | ||
| <div className={theme.item} title={title}> | ||
| <div className={classNames(theme.item, { [theme.disabled]: item.disabled })} title={title}> |
There was a problem hiding this comment.
Typeahead has its own wrapper to display each item (which has the onClick handler) so you can pass disabled if it's a button or an anchor and aria-disabled props.
You can take a look at #1993 for an example
There was a problem hiding this comment.
Yes, thanks
if it was button, then yes, but the wrapper is < li > element, so disabled on it won't do anything
we will need to pass a class to it
| if (this.props.multiSection) { | ||
| newValue = this.state.suggestions[sectionIndex].suggestions[itemIndex]; | ||
| } | ||
| if (newValue.disabled) { |
There was a problem hiding this comment.
We need to follow that PR I guess moroshko/react-autowhatever#35
There was a problem hiding this comment.
Yes, also saw that PR, but it was done more than a year ago (
And as there is no any activity on that PR, there is not guarantee that we will get such functionality til release
But we can follow of course
…843/disabled-item-in-datalist
…843/disabled-item-in-datalist
…hub.com:Talend/ui into vkoval/feat/TMC-15843/disabled-item-in-datalist
…843/disabled-item-in-datalist
| } | ||
| } else { | ||
| const index = this.props.titleMap.findIndex(item => item.name === value); | ||
| const index = this.props.titleMap.findIndex(item => item.value === value); |
There was a problem hiding this comment.
Be careful with that. The variable naming is confusing.
You items are objects {name, value}. But we pass the array of names to Typeahead that return us the selected name, which we store as state.value:/
So in state, value is in fact the item name.
This method intends to highlight automatically the selected option when we open the dropdown. By changing the filter, you break that behavior. It works only if name = value, but with custom titleMap, name != value.
We should change the state var name from value to selectedItemName.
But in another PR to be sure it doesn't interfere with your current PR.
In the meantime, please revert this line and the one in the bloc above.
…843/disabled-item-in-datalist
…hub.com:Talend/ui into vkoval/feat/TMC-15843/disabled-item-in-datalist
|
I validated even if I consider that disabled items should not be reachable by keyboard like a simple |
VolodymyrKovalM
deleted the
vkoval/feat/TMC-15843/disabled-item-in-datalist
branch
4 participants
What is the problem this PR is trying to solve?
https://jira.talendforge.org/browse/TMC-15843
In TMC we need a possibility to make disabled item in Datalist
What is the chosen solution to this problem?
Please check if the PR fulfills these requirements